<template>
  <div class="websocket-test">
    <h1>WebSocket Test Page</h1>
    <div class="status">
      <span>Connection Status: </span>
      <span :class="{ 'connected': isConnected, 'disconnected': !isConnected }">
        {{ isConnected ? 'Connected' : 'Disconnected' }}
      </span>
    </div>
    <div class="messages">
      <h2>Messages</h2>
      <div v-for="(message, index) in messages" :key="index" class="message">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebSocketTest',
  data() {
    return {
      isConnected: false,
      messages: []
    }
  },
  mounted() {
    // 监听 WebSocket 连接状态
    this.$root.$on('websocket-connected', () => {
      this.isConnected = true
      this.messages.push('WebSocket connected')
    })

    this.$root.$on('websocket-disconnected', () => {
      this.isConnected = false
      this.messages.push('WebSocket disconnected')
    })

    // 监听消息
    this.$root.$on('websocket-message', (message) => {
      this.messages.push(`Received: ${message}`)
    })
  },
  beforeDestroy() {
    // 清理事件监听
    this.$root.$off('websocket-connected')
    this.$root.$off('websocket-disconnected')
    this.$root.$off('websocket-message')
  }
}
</script>

<style scoped>
.websocket-test {
  padding: 20px;
}

.status {
  margin: 20px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.connected {
  color: #4caf50;
  font-weight: bold;
}

.disconnected {
  color: #f44336;
  font-weight: bold;
}

.messages {
  margin-top: 20px;
}

.message {
  padding: 10px;
  margin: 5px 0;
  background-color: #e3f2fd;
  border-radius: 4px;
}
</style> 